<template>
  <div class="main">
    <!-- 头部导航 -->
    <div class="header">
      <nav-bar left-arrow border="false" @click-left="onClickLeft">
        <template #right>
          <icon name="contact" size="18" @click="onClickRight" />
        </template>
      </nav-bar>
    </div>

    <!-- 图标 -->
    <div class="headerImg">
      <img src="../../assets/image/ic_header_logo.png" alt="" />
    </div>
    <p>华为账号</p>
    <p>登录账号以使用云空间、应用市场及更多服务</p>

    <!-- 账号密码 -->
    <!-- 可以使用 CellGroup 作为容器 -->
    <div class="userName">
      <cell-group inset>
        <field
          v-model="userName"
          placeholder="手机/邮箱地址/账户名"
          label-width="0"
          @keyup.enter="login()"
        />
      </cell-group>
    </div>
    <div class="password">
      <cell-group inset>
        <field
          v-model="password"
          type="password"
          placeholder="密码"
          @keyup.enter="login()"
        />
      </cell-group>
    </div>
    <div class="other">
      <span>短信验证码登录</span>
      <span>忘记密码</span>
    </div>
    <div class="submit">
      <Button type="primary" size="large" class="login" @click="login()"
        >登录</Button
      >
      <router-link :to="{ name: 'Register' }">
        <Button type="default" size="large" class="register">注册账号</Button>
      </router-link>
    </div>
    <div class="otherLogin">
      <p>其他方式登录</p>
      <div class="qq">
        <img
          src="https://id1.cloud.huawei.com/CAS/static_rss/rss_96/CAS/vuebuild/img/wap_qq_huawei.png"
          alt=""
        />
      </div>
    </div>
    <div class="help">
      <div>遇到问题</div>
      <div>隐私声明</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { NavBar, Icon, Field, CellGroup, Button, Toast } from "vant";
import { useRouter } from "vue-router";
import { loginAPI } from "../../services/auth";
import { setToken } from "../../utils/auth";

const router = useRouter();
const userName = ref("");
const password = ref("");

const onClickLeft = () => history.back();
const onClickRight = () => router.push({ name: "User" });

// const loginItem= {'userName':userName.value,'password':password.value}
//调用登陆的接口
const login = async () => {
  if (userName.value && password.value) {
    // 开始调接口
    const res = await loginAPI({
      userName: userName.value,
      password: password.value,
    });

    if (res.code == 1) {
      Toast.success("登录成功");
      setToken(res.data); //存token
      // 跳转个人中心
      setTimeout(() => {
        router.push({
          name: "User",
        });
      }, 1500);
      //
    } else {
      Toast.fail(res.data);
    }
  } else {
    Toast.fail("请输入用户名和密码");
  }
};
</script>

<style scoped lang="scss">
.main {
  height: 100%;
  background-color: white;
  .headerImg {
    width: 40px;
    height: 40px;
    margin: 80px auto 15px auto;
    img {
      width: 40px;
      height: 40px;
    }
  }
  p:nth-child(3) {
    font-size: 20px;
    text-align: center;
    margin-bottom: 10px;
  }
  p:nth-child(4) {
    text-align: center;
    font-size: 12px;
    color: #777;
    margin-bottom: 30px;
  }
  .userName,
  .password {
    width: 90vw;
    margin: 10px auto;
    border-bottom: 1px solid #999;
  }
  .other {
    width: 90vw;
    color: #007dff;
    margin: 30px auto;
    height: 20px;
    span:nth-child(1) {
      float: left;
    }
    span:nth-child(2) {
      float: right;
    }
  }
  .submit {
    width: 90vw;
    margin: 20px auto;
    // border-radius: 6px;
    .login,
    .register {
      border-radius: 20px;
      height: 35px;
      // margin-bottom: 10px;
    }
    .register {
      background-color: #f2f2f2;
      margin-top: 15px;
      color: #007dff;
    }
  }
  .otherLogin {
    p {
      font-size: 14px;
      color: #777;
      text-align: center;
      margin-top: 200px;
    }
    .qq {
      width: 40px;
      height: 40px;
      margin: 10px auto;
      img {
        width: 40px;
        height: 40px;
      }

      // background-image: url('https://id1.cloud.huawei.com/CAS/static_rss/rss_96/CAS/vuebuild/img/wap_qq_huawei.png');
    }
  }
  .help {
    width: 180px;
    margin: 0 auto;
    font-size: 14px;
    color: #007dff;
    text-align: center;
    div:nth-child(1) {
      width: 50%;
      float: left;
      border-right: 1px solid #999;
    }
    div:nth-child(2) {
      width: 50%;
      float: right;
    }
  }
}
</style>
